﻿<template>
  <v-flex class="xs12 mx-auto">
      <v-form v-model="valid" ref="basic">
          <v-layout row>
              <v-flex xs10 mx-auto>
                  <div align="center" style="margin-top: 20px;margin-left: 120px">
                      <v-upload v-model="memberForm.avator" :isAudio="false" :isAvator="true" :pic-width="100" :pic-height="100"
                          needSignature url="/signature?type=image"/>
          </div>
        </v-flex>
      </v-layout>
          <v-layout row>
            <v-flex class="xs10 mx-auto">
                <div style="margin-top: 20px;">
                    <v-text-field
                            label="用户名"
                            v-model="memberForm.username"
                            prepend-icon="mdi-emoticon-tongue"
                            required :rules="[v => !!v || '用户名不能为空']" hide-details/>
                </div>
            </v-flex>
        </v-layout>
          <v-layout row>
              <v-flex class="xs10 mx-auto">
                  <div style="margin-top: 20px;">
                      <v-text-field
                              label="密码"
                              :append-icon="show ? 'visibility' : 'visibility_off'"
                              :type="show ? 'text' : 'password'"
                              @click:append="show = !show"
                              v-model="memberForm.password"
                              prepend-icon="mdi-emoticon-tongue"
                              required :rules="[v => !!v || '  密码不能为空']" hide-details/>
                  </div>
              </v-flex>
          </v-layout>
          <v-layout row>
              <v-flex class="xs10 mx-auto">
                  <div style="margin-top: 20px;">
                      <v-text-field
                              label="电话"
                              v-model="memberForm.phone"
                              prepend-icon="mdi-emoticon-tongue"
                              required :rules="[v => !!v || '电话不能为空']" hide-details/>
                  </div>
              </v-flex>
          </v-layout>
          <v-layout row>
              <v-flex class="xs10 mx-auto">
                  <div style="margin-top: 20px;">
                      <v-switch
                              v-model="memberForm.status"
                              label="是否启用"
                              color="blue"
                      ></v-switch>
                  </div>
              </v-flex>
          </v-layout>
          <v-layout row>
            <v-flex class="xs10 mx-auto">
                <div style="margin-top: 10px;">
                    <v-select
                            v-model="memberForm.roles"
                            :items="roles"
                            item-text="roleName"
                            label="选择角色"
                            attach
                            prepend-icon="mdi-emoticon-tongue"
                            chips
                            multiple
                            return-object
                            single-line
                    ></v-select>
                </div>
            </v-flex>
        </v-layout>

          <v-layout row>
              <v-flex xs10 mx-auto>
                  <div align="center" style="margin-top: 50px;">
                <v-btn @click="submit" color="primary">保存</v-btn>
              </div>
          </v-flex>
      </v-layout>
    </v-form>
  </v-flex>
</template>

<script>
export default {
    name: "member-form",
    props: {
      oldMember: {
        type: Object
      },
      isEdit: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        valid: false,
        memberForm: {},
        show:false,
        roles:[],
      }
    },
    methods: {
        clear() {},
        submit() {
            const {roles,...params} = this.memberForm
            const rids = roles.map(r=>r.id).join(",")
            params.rids = rids
            params.status = this.memberForm.status?'1':'0'
            this.$http({
              method: this.isEdit ? 'put' : 'post',
              url: "/member/save",
              data: this.$qs.stringify(params)
            }).then(() => {
              //成功，关闭窗口
              this.$emit("close");

              this.$message.success("保存成功")
            }).catch(error => {
              console.log(error)
              this.$message.error("保存失败！");
            })
      },
            getRoles() {
                this.$http.get("/role/all").then(resp => {
                    this.roles= resp.data
                    console.log("this.roles")
                    console.log(this.roles)
                })
            }
    },
    watch: {
      oldMember: {
        deep: true,
        handler() {
          console.log(this.oldMember)
          this.memberForm = this.oldMember
        }
      },
    },
    created() {
        this.getRoles()
    }
}
</script>